%flex-row-centered {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

%flex-column-centered {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

%flex-list {
    display: flex;
    justify-content: space-between;
    padding: 0 30rpx;
    height: 100rpx;
    line-height: 100rpx;
}

.container {
    height: 100vh;
}

.user-section {
	/* #ifdef APP-PLUS */
	 padding: 90rpx 0 0;
	 height: 386rpx;
	/* #endif */
	/* #ifdef H5 */
	 padding: 70rpx 0 0;
	 height: 366rpx;
	/* #endif */
	height: 366rpx;
    box-sizing: border-box;
    position: relative;
	background: url("~@/static/image/person-bg.png");
	background-size: 100% 100%;
    .bg-img {
        overflow: hidden;
        position: absolute;
        width: 100%;
        height: 332rpx;
        top: 0;
        image {
            width: 100%;
            height: 332rpx;
        }
    }
    .user-section-box {
        width: 100%;
        padding: 0 50rpx;
        box-sizing: border-box;
        position: relative;
        z-index: 100;
    }
    .user-info-box {
        display: flex;
        &.no-log {
            position: relative;
            z-index: 333;
            .user-title {
                font-size: 33rpx;
                font-weight: 500;
                color: #FFFFFF;
                line-height: 1.2;
               
            }
            .user-desc {
                border: none !important;
                font-size: $font-size-base;
                color: #fff !important;
                padding: 0 !important;
            }
        }
        .user-head {
            box-sizing: content-box;
            width: 103rpx;
            height: 103rpx;
            border-radius: 50%;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            image {
                width: 100%;
                height: 100%;
            }
        }
        .user-box {
            flex: 1;
            display: flex;
            flex-direction: column;
            margin-left: 17rpx;
            height: 100%;
            text {
                width: 300rpx;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: $font-size-toolbar;
                color: #fff;
                line-height: 1;
            }
            .user-label {
                margin-top: 18rpx;
                text {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    color: #e7e525;
                    padding: 4rpx 16rpx;
                    font-size: $font-size-tag;
                    line-height: 1;
                    background: rgba(0, 0, 0, 0.5);
                    border-radius: 40rpx;
                }
            }
        }
    }
    .user-set {
        position: absolute;
        // width: 40rpx;
        // height: 40rpx;
        display: flex;
        align-items: center;
        right: 30rpx;
        /* #ifdef  MP*/
        top: 20rpx;
        /* #endif */
        /* #ifdef  H5 || MP-ALIPAY || APP-PLUS*/
        top: 10rpx;
        /* #endif */
        .iconfont {
            font-size: 40rpx;
            color: #fff;
            line-height: 1;
            margin-left: 18rpx;
        }
    }
}
.magic-card{
	
}
.tool-body{
	padding: 10rpx 0 ;
	flex-wrap: wrap;
	.body-item{
		padding: 20rpx 0;
		flex-basis: 25%;
		position: relative;
		.body-text{
			    font-size: 26rpx;
			    margin-top: 10rpx;
			    color: #303133;
		}
		.feedback{
			    position: absolute;
			    width: 100%;
			    height: 100%;
			    opacity: 0;
		}
	}
}
.member-body {
	margin: 126rpx 17rpx 0 23rpx;
	border-radius: 31rpx;
    position: relative;
    // margin-top: -58rpx;
    // padding: 0 20rpx;
}

.member-sction {
    @extend %flex-row-centered;
    height: 100rpx;
    border-radius: 10rpx;
    margin-top: $margin-updown;
    margin: 10px -50rpx 0;
    .line {
        width: 2rpx;
        height: 40%;
        background: rgba(243, 243, 243, 0.5);
    }
    .sction-item {
        @extend %flex-column-centered;
        line-height: 1.5;
        width: 30%;
        text {
            font-size: $font-size-base;
            color: #ffffff;
            width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: center;
        }
        .sction-item-name {
            font-size: $font-size-tag;
        }
        .num {
            font-size: 30rpx;
        }
    }
}

.order-section {
	margin: 38rpx 17rpx 0 23rpx;
    overflow: hidden;
    background-color: #fff;
	border-radius: 31rpx;
    .order-head {
        padding:0 30rpx;
		height: 69rpx;
        border-bottom: 1rpx solid #DADADA;
        .order-tit {
			font-weight: bold;
		   font-size: 26rpx;
           color: #333333;
        }
        .order-tip {
            margin-left: auto;
            margin-right: 10rpx;
            color: #666666;
            font-size: 22rpx;
            letter-spacing: 3rpx;
        }
        .order-more {
            color: #666666;
            font-size:22rpx;
        }
    }
    .order-body {
        @extend %flex-row-centered;
        height: 165rpx;
        box-sizing: border-box;
        .order-item {
            @extend %flex-column-centered;
            .order-icon {
                position: relative;
                line-height: 1;
                .order-num {
                    position: absolute;
                    top: -18rpx;
                    right: -22rpx;
                    width: 30rpx;
                    height: 30rpx;
                    font-size: $font-size-tag;
                    line-height: 30rpx;
                    text-align: center;
                    color: #fff;
                    padding: 6rpx;
                    border-radius: 50%;
                    z-index: 99;
                }
               .order-icon-size{
					font-size: 52rpx;
					color: #333;
               }
                .iconfont {
                    font-size: $font-size-base + 16rpx;
                }
            }
            .order-name {
                font-size: $font-size-sub;
                color: $color-title;
            }
        }
		
    }
}

.member-level {
    width: 100%;
    padding: 0 $margin-both;
    box-sizing: border-box;
    position: relative;
    margin-top: $margin-updown;
    .member {
        position: absolute;
        width: 69rpx;
        height: 75rpx;
        right: 30rpx;
        bottom: 20rpx;
        image {
            width: 69rpx;
            height: 75rpx;
        }
    }
    .member-level-box {
        // width: 702rpx;
        height: 88rpx;
        padding: 0 $padding;
        border-radius: 6px;
        background: linear-gradient(to bottom, #232323, #222221);
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #e5ce75;
        .iconhuiyuan {
            margin-right: 10rpx;
            line-height: 1;
            font-size: 32rpx;
        }
        .info-wrap {
            display: flex;
            color: #e5ce75;
            font-size: $font-size-tag;
            flex: 1;
        }
        .member-title {
            margin-right: 10rpx;
            font-size: $font-size-tag;
        }
        .member-btn {
            text-align: center;
            line-height: 56rpx;
            height: 56rpx;
            border-radius: 56rpx;
            width: 160rpx;
            font-size: $font-size-tag;
            color: #222;
            font-weight: bold;
            background-image: linear-gradient(left, #E3B66B, #F7DAA5);
        }
        text {
            font-size: $font-size-tag;
            line-height: 1;
            display: flex;
            align-items: center;
            text {
                display: inline-block;
            }
        }
    }
}

.example-body {
   background: #FFFFFF;
   border-radius: 31rpx;
    .example-body-head {
       padding-left: 30rpx;
	   height: 69rpx;
	   border-bottom: 1rpx solid #DADADA;
    }
    .example-tit {
        font-size: 26rpx;
        font-weight: 500;
        color: #333333;
    }
    .example-tit-palace {
        background-color: #fff;
    }
	
}

.image {
    width: 60rpx;
    height: 60rpx;
}

.text {
    font-size: $font-size-sub;
    margin-top: 10rpx;
    color: $color-title;
}

.copyright-info {
    margin-bottom: 40rpx;
    @extend %flex-column-centered;
    .copyright-pic {
        width: 180rpx;
        height: 180rpx;
        margin: auto;
        image {
            width: 100%;
            height: 100% !important;
        }
    }
    text {
        font-size: $font-size-tag;
        height: 100rpx;
        line-height: 100rpx;
        color: $color-tip;
    }
    .copyright-desc {
        color: lighten($color-tip, 30%);
        font-size: $font-size-tag;
        text-shadow: 0 0 1px lighten($color-tip, 40%);
    }
}

.member-adv {
    display: flex;
    justify-content: space-between;
    height: 152rpx;
    box-sizing: border-box;
    border-radius: 10rpx;
    margin: 20rpx;
    >navigator {
        position: relative;
        width: 344rpx;
        image {
            display: block;
            max-width: 100%;
            max-height: 100%;
        }
    }
}

.list-style {
    background-color: #fff;
    .list-style-item {
        .text {
            font-size: $font-size-sub;
        }
        &.interval {
            margin-top: 10px;
        }
        &.interval:nth-child(1) {
            margin-top: 0;
        }
        &.no-interval {
            height: 100rpx;
            border-top: 1rpx solid #e8e8e8;
            margin: 0px 15px;
            padding: 0 10rpx;
            .text {
                margin-top: 0;
            }
        }
        padding: 0 10px;
        background-color: #fff;
        display: flex;
        align-items: center;
        height: 40px;
        .image {
            margin-right: 10px;
        }
        .iconfont {
            margin-left: auto;
            color: #a6b4cd;
        }
    }
}

.popupContent {
    width: 100%;
    min-height: 900rpx;
    background: none;
    .popupContent-top {
        padding: 40rpx;
        box-sizing: border-box;
        width: 100%;
        height: 800rpx;
        background: #FFFFFF;
        border-radius: 12rpx;
        .popupContent-top-title {
            display: flex;
            align-items: center;
            margin-bottom: 60rpx;
            .popupContent-top-title-txt {
                font-size: 30rpx;
                margin-left: 16rpx;
            }
        }
        .popupContent-top-tiao {
            width: 480rpx;
            height: 160rpx;
            margin: 0 auto 46rpx;
            image {
                width: 100%;
                height: 100%;
            }
        }
        .popupContent-top-tiaoJie {
            text-align: center;
            font-size: 28rpx;
            color: rgb(153, 153, 153);
            margin-bottom: 40rpx;
        }
        .popupContent-top-erwei {
            width: 254rpx;
            height: 254rpx;
            margin: 0 auto 20rpx;
            image {
                width: 100%;
                height: 100%;
            }
        }
        .popupContent-top-shauxin {
            width: 350rpx;
            height: 80rpx;
            border-radius: 40rpx;
            background: rgb(245, 249, 247);
            margin: 0 auto;
            font-size: 30rpx;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            i {
                margin-left: 20rpx;
            }
        }
        .popupContent-top-text {
            text-align: center;
            font-size: 18rpx;
            color: rgb(153, 153, 153);
            margin-top: 30rpx;
        }
    }
    .popupContent-bottom {
        display: flex;
        align-items: center;
        justify-content: center;
        background: none !important;
        .iconfont-delect {
            font-size: 60rpx;
            margin-top: 20rpx;
            color: white;
        }
    }
}

/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
    background: none !important;
}

.popupContent .popupContent-top {
    height: auto;
}
.box-ark-icon{
		color: #fff;
		width: 69rpx;
		height: 69rpx;
		background: #FFC26B;
		border-radius: 50%;
		text-align: center;
		line-height: 69rpx;
	}
	.address-icon{
		color: #fff;
		width: 69rpx;
		height: 69rpx;
		background: #9359FF;
		border-radius: 50%;
		text-align: center;
		line-height: 69rpx;
	}
	.coupon-icon{
		color: #fff;
		width: 69rpx;
		height: 69rpx;
		font-size: 40rpx;
		background:#FC5957;
		border-radius: 50%;
		text-align: center;
		line-height: 69rpx;
	}
	.footprint-icon{
		color: #fff;
		width: 69rpx;
		height: 69rpx;
		background:#4DBDFF;
		border-radius: 50%;
		text-align: center;
		line-height: 69rpx;
	}
	.service-icon{
		color: #fff;
		width: 69rpx;
		height: 69rpx;
		background:#ff70a0;
		border-radius: 50%;
		text-align: center;
		line-height: 69rpx;
	}
	.concat-icon{
		color: #fff;
		width: 69rpx;
		height: 69rpx;
		background:#4BDC73;
		border-radius: 50%;
		text-align: center;
		line-height: 69rpx;
	}